<template>
    <div>
        <div class="card-list">
            <AddEntityDrawer
                    title="新增实体"
                    :visible="visible"
                    :is-add="isAdd"
                    :entity-v-o="entityVO"
                    @changeAdd="addEntity"
                    @changeUpdate="updateEntity"
                    @close="close"
            />

            <a-list
                    :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
                    :dataSource="dataSource"
            >
                <a-list-item slot="renderItem" slot-scope="item,index">
                    <template v-if="item.add">
                        <a-button class="new-btn" type="dashed" @click="add">
                            <a-icon type="plus" />新增实体
                        </a-button>
                    </template>
                    <template v-else>
                        <a-card :hoverable="true">
                            <a-card-meta >
                                <a-avatar class="card-avatar" slot="avatar" src="./img/E.png" size="large" />
                                <div style="margin-bottom: 3px" slot="title">{{item.name}}({{item.chName}})</div>
                                <div class="meta-content" slot="description">
                                    <a-row class="form-row">
                                        <a-col :lg="12" :md="12" :sm="12" v-for="(prop,index) in item.propertyList" :key="index">
                                                <span>{{prop.type}} {{prop.name}} {{prop.chName}}</span>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-card-meta>
                            <a slot="actions" @click="onUpdate(item,index)">修改</a>
                            <a slot="actions" @click="onDelete(item,index)">删除</a>
                        </a-card>
                    </template>
                </a-list-item>
            </a-list>
        </div>

        <div style="text-align:center">
            <a-button style="margin-left: 8px;margin-right: 50px" @click="prevStep">上一步</a-button>
            <a-button type="primary" @click="nextStep">下一步</a-button>
        </div>

    </div>
</template>

<script>
    import AddEntityDrawer from "../drawer/AddEntityDrawer";
    const dataSource = []
    dataSource.push({
        add: true
    })

    export default {
        name: 'Step2',
        data () {
            return {
                visible: false,
                isAdd: true,
                index:0,
                dataSource,
                entityVO: {},
            }
        },
        components:{AddEntityDrawer,},
        props:{
            project: Object,
        },
        methods: {
            nextStep () {
                //this.$emit('changeProject',this.project);
                const entityList = this.dataSource.filter((item, index) => index > 0);
                this.$emit('saveEntityList',entityList);
                this.$emit('nextStep');
            },
            prevStep() {
                const entityList = this.dataSource.filter((item, index) => index > 0);
                this.$emit('saveEntityList',entityList);
                this.$emit('prevStep');
            },
            add() {
                this.visible = true;
            },
            close() {
                this.isAdd = true;
                this.visible = false;
            },
            onUpdate(entity,index) {
                this.index = index;
                this.isAdd = false;
                this.entityVO = entity;
                this.visible = true;
            },
            onDelete(entity,index) {
                this.$confirm({
                    title: '删除' + entity.name,
                    content:'确定删除名为' + entity.name + "的这一项吗",
                    onOk:async () => {
                        this.dataSource.splice(index,1);
                        this.$message.success('删除实体成功');
                    }
                })
            },

            addEntity(entity) {
                this.dataSource.push(entity);
            },
            updateEntity(entity) {
                this.isAdd = true;
                this.dataSource[this.index] = entity;
            }


        },
        mounted() {
            this.dataSource = [];
            this.dataSource = [{
                add: true
            }];
            this.dataSource.push(...this.project.entityVOList);
        }
    }
</script>

<style scoped>
    .card-avatar {
        width: 48px;
        height: 48px;
        border-radius: 48px;
    }
    .new-btn{
        font-size: 30px;
        border-radius: 2px;
        width: 100%;
        height: 187px;
    }
    .meta-content{
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        height: 64px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
</style>
